//dom模型的基本操作
//DOM文档对象模型（Document Object Model）
//是一个树型结构，最开始的根元素就是document
//常用的获取对象的方法：
//1>document.getElementById(id)
//2>document.getElementsByTagName(name) 集合--[下标值]
//3>document.getElementsByClassName(name)通过类名来查找元素  集合--[下标值]
//getElementsByClassName(name)--小实例
var obj_box_main=document.getElementsByClassName("box_main");
console.log(obj_box_main);
//常用的属性：
//1>attributes获取元素的属性集合，集合中元素的顺序跟我们在页面上定义的属性的顺序是一致的--【下标值】
//第一个是属性名：name 第二是值：value 
//attributes--小实例
console.log("第一个类名是box_main的div的文本内容是："+obj_box_main[0].innerText);
var objfirstDiv=obj_box_main[0];
console.log(objfirstDiv.attributes);
console.log("第一个类名是box_main的div的第一个属性名称是："+objfirstDiv.attributes[0].name);
console.log("第一个类名是box_main的div的第一个属性值是："+objfirstDiv.attributes[0].value);
console.log("通过CLASS获取第一个的属性值是："+objfirstDiv.attributes["class"].value);//实际开发中建议用这个
//nextSibling:表示跟当前元素同级的下一个同级元素---（文本--空格元素）
//nextElementSibling:表示跟当前元素同级的下一个同级元素（不包含文本--空格元素）实际开发用这个
//previousSibling:表示跟当前元素同级的上一个同级元素---（文本--空格元素）
//previousElementSibling:表示跟当前元素同级的上一个同级元素（不包含文本--空格元素）实际开发用这个
//小实例
var objTwoDiv=obj_box_main[1];
console.log(objTwoDiv.previousSibling.previousSibling.innerText);
console.log(objTwoDiv.previousElementSibling.innerText);